<template>
  <view class="c-page" :class="ggclass" :style="[styles]">
    <c-loading-page v-if="value == 0" :value="value == 0"></c-loading-page>
    <slot v-else-if="value == 1"></slot>
    <view class="empty-wrap" v-if="value == 2">
      <image :src="src" mode="widthFix"></image>
      <view>{{ text }}</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed, defineProps, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance() as any;
const props = defineProps({
  text: {
    // 说明文字
    type: String,
    default: "这里空空如也...",
  },
  ggclass: {
    type: String,
    default: "",
  },
  src: {
    // 图片地址
    type: String,
    default: "/static/img/empty.png",
  },
  value: {
    type: [Number, String],
    default: 0,
  },
  width: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "",
  },
  padding: {
    type: String,
    default: "",
  },
});

const styles = computed(() => {
  let params = {
    width: proxy.$rpxunit(props.width),
    height: proxy.$rpxunit(props.height),
    padding: props.padding
      .split(" ")
      .map((v) => proxy.$rpxunit(v))
      .join(" "),
  };
  return params;
});
</script>

<style lang="scss" scoped>
.c-page {
  width: 100%;
  height: 100%;
  flex: 1;
}

.empty-wrap {
  width: 100%;
  padding-top: 120rpx;
  box-sizing: border-box;

  image {
    width: 350rpx;
    height: 290rpx;
    margin-left: 50%;
    transform: translateX(-50%);
  }

  view {
    text-align: center;
    font-size: 26rpx;
    letter-spacing: 1rpx;
    color: #a1adbd;
    margin-top: 5rpx;
  }
}
</style>